<template>
  <div class="current-address">
    <img class="bg-border" src="@/assets/images/parcel/bg-border.png" alt="">
    <div class="address-info" v-if="addressInfo">
      <div class="address-item">
        <span class="label">{{$t('transport.addressee')}}</span>
        <span class="value"> {{addressInfo.recipientName.split(',')[0]}} {{addressInfo.recipientName.split(',')[1]}}</span>
      </div>
      <div class="address-item">
        <span class="label">{{$t('transport.deliveryAddress')}}</span>
        <div class="value">
          <span>{{addressInfo.countryText}} {{addressInfo.provinceText}} {{addressInfo.cityText}} {{addressInfo.areaText}} {{addressInfo.addressDetail}}</span>
<!--          <Button size="small" type="primary" @click="onCopy">{{$t('transport.copyAddress')}}</Button>-->
        </div>
      </div>
      <div class="address-item">
        <span class="label">{{$t('transport.postcode')}}</span>
        <span class="value">{{addressInfo.postalCode}}</span>
      </div>
      <div class="address-item">
        <span class="label">{{$t('transport.contactNumber')}}</span>
        <span class="value">+{{addressInfo.regionCode}} {{addressInfo.mobile}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "order-address",
  props: {
    addressInfo: [Object, String]
  }
}
</script>

<style scoped lang="less">
.current-address {
  position: relative;
  margin-top: 16px;
  .bg-border {
    display: block;
    width: 100%;
    height: 210px;
  }
  .address-info {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 40px;
    .top-label {
      color: @t-title-color;
      font-size: 14px;
      font-weight: 500;
    }
    .address-item {
      display: flex;
      align-items: center;
      margin-top: 6px;
      &:first-child {
        margin-top: 16px;
      }
      .label {
        flex: 0 0 160px;
        width: 160px;
        color: @t-text-color;
        font-size: 14px;
      }
      .value {
        flex: 1;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
        span {
          margin-right: 16px;
        }
      }
    }
  }
}
</style>